<template>
  <div class="supplier-list">
      <el-row :gutter="16" style="line-height:40px">
        <el-col :span="1">
          <div class="label-wrap category">
            <label for="">编号：</label>
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="supplier_code" size="small" placeholder="请输入编号" style="width:100%"></el-input>
        </el-col>

        <el-col :span="1">
          <div class="label-wrap category">
            <label for="">名称：</label>
          </div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="supplier_name" size="small" placeholder="请输入供应商名称" style="width:100%"></el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" size="mini" icon="el-icon-search" style="width:80px" @click="searchSupplier">搜索</el-button>
        </el-col>

        <el-col :span="13">
          <el-button type="primary" size="mini" 
          style="width:120px;margin-left:100px;" icon="el-icon-plus" @click="addsupplierDialog=true">新增供应商</el-button>
        </el-col>
      </el-row>

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-table :data="supplierlist" border style="width: 100%" v-loading="supplierLoading">
            <el-table-column prop="supplierCode" label="供应商编码" width="100"></el-table-column>
            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
            <el-table-column prop="supplierTel" label="电话" ></el-table-column>
            <el-table-column prop="contactPerson" label="联系人" ></el-table-column>
            <el-table-column prop="contactAddress" label="联系地址" width="200"></el-table-column>
            <el-table-column prop="supplierRemark" label="备注" ></el-table-column>
            <el-table-column prop="supplierCreateDate" label="创建时间" ></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit" @click="editSupplier(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delSupplier(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

    <addsupplier :addsupplierDialog.sync="addsupplierDialog"></addsupplier>
    <updatesupplier :choseSupplier='choseSupplier' :openUpdateSupplier.sync="openUpdateSupplier"></updatesupplier>
  </div>
</template>

<script>
import addsupplier from './addsupplier';
import updatesupplier from './updatesupplier';
import { GetSuppierPage, DelSupplier, SearchSupplier } from '@/api/prod';
export default {
  name: 'supplier',
  components: {
    addsupplier,
      updatesupplier
  },
  data() {
    return {
        supplierLoading: true,
        supplier_name: '',
        supplier_code: '',
        supplier_tel: '',
        addsupplierDialog: false,
        openUpdateSupplier: false,
        choseSupplier: {},
        supplierlist: [],
        // 分页
        pageNum: 1,
        pageSize: 8,
        total_num: null,
        isSearch: false,
    }
    
  },
  watch: {
    addsupplierDialog(newVal) {
      if (!newVal) {
        this.getSuppliers()
      }
    },
    openUpdateSupplier(newVal) {
      if (!newVal) {
        if (this.isSearch) {
          this.searchSupplier()
        } else {
          this.getSuppliers()
        }
      }
    },
  },
  methods:{
    delSupplier(el) {
      // console.log(el);
      // this.confirm({
      //   content: '此操作将永久删除当前供应商, 是否继续?',
      // });
      DelSupplier(el.supplierId).then( res => {
        let data = res.data
        this.$message({
            message: data.msg,
            type: 'success'
        })
        this.getSuppliers()
      }) 
    },
    editSupplier(data) {
        this.openUpdateSupplier = true;
        this.choseSupplier = data;
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.supplierLoading = true;
      this.pageNum = val;
      if (this.isSearch) {
        this.searchSupplier()
      } else {
        this.getSuppliers()
      }
      
    },
    getSuppliers() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetSuppierPage(reqData).then( res => {
        let data = res.data.info;
        this.supplierlist = data.list;
        this.total_num = data.total;
        this.supplierlist.forEach( e => {
          return e.supplierCreateDate = this.formatDate(e.supplierCreateDate)
        })
        this.supplierLoading = false;
      })
    },
    
    formatDate(value) { 
      const dt = new Date(value);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + '').padStart(2, '0');
      const d = (dt.getDate() + '').padStart(2, '0');
      return `${y}-${m}-${d}`
    },
    // 搜索供应商
    searchSupplier() {
      this.supplierLoading = true;
      let reqdata = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        supplierCode: this.supplier_code,
        supplierName: this.supplier_name,
      }
      SearchSupplier(reqdata).then(res => {
          let data = res.data.info;
          this.supplierlist = data.list;
          this.total_num = data.total;
          this.supplierlist.forEach( e => {
            return e.supplierCreateDate = this.formatDate(e.supplierCreateDate)
          })
          this.supplierLoading = false;
          this.isSearch = true;
      })
    }
  },

  mounted() {
     this.getSuppliers()
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>
  
